<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      html, body { height: 100%; margin: 0; padding: 0;}
    .container {
        display: grid;
        height: 100%;
        min-width: 200px;
        /* 设置列数 */
        /* 意思是把容器划分为三列，第一列宽100px，第二列宽100px,第三列宽自适应 */
        grid-template-columns: 100px 100px auto;
        /* 设置行数 */
        /* 将容器划分为五行，第一行高度自适应，第二行高度固定为50px，第三行高度占容器高度的10%，第四行占剩余高度的2/3，第五行占剩余高度的1/3 */
        grid-template-rows: auto 50px 10% 2fr 1fr;
        /* 设置列间距 */
        /*grid-column-gap: 10px;*/
        /* 设置行间距 */
        /*grid-row-gap: 10px;*/
        /* 是对 grid-row-gap 和 grid-column-gap 的简写 */
        grid-gap: 10px 20px;
    }

    .item {
        border: 1px solid red;
    }

    .item-01 {
        /* 表示列跨度：第一列到第三列 */
        grid-column: 1/3;
    }

    .item-02 {
        /* 更改元素的宽度和排列位置 */
        /* stretch：默认值，拉伸内容宽度为预设宽度 */
        /* start：宽度为内容宽度，内容在左侧展示 */
        /* center： 宽度为内容宽度，内容居中展示 */
        /* end：宽度为内容宽度，内容在右侧展示 */
        justify-self: center;
    }

    .item-03 {
        /* 表示行跨度：第二行到第四行 */
        grid-row: 2/4;
    }

    .item-10 {
        /* 更改子元素的高度和排列位置 */
        /* stretch：默认值，拉伸高度为预设高度 */
        /* start：高度为内容高度，内容在上侧展示 */
        /* center：高度为内容高度，内容在居中展示 */
        /* end：高度为内容高度，内容在下侧展示 */
        align-self: center;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="item item-01">1</div>
  <div class="item item-02">2</div>
  <div class="item item-03">3</div>
  <div class="item">4</div>
  <div class="item item-05">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item item-10">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
</div>
</body>
</html>
